<template>
	<view style="background: #fff;min-height: 100vh;" class="Afont"
		:style="{background:'url('+Imgbase+'/brave_goodpoor_bgc.png)','background-size':'100%',}">

		<view class="padding-top-50 padding-left-40 ">
			<view class="">
				<image class="w-80 h-80" :src="Imgbase + '/brave_goodindex_img1.png'" mode="aspectFit" @click="back">
				</image>

				<image class="w-100 h-120 padding-left-25 padding-top-25" :src="Imgbase + '/brave_goodpoor_img2.png'"
					@click="gobape" mode="aspectFit">
				</image>
			</view>
		</view>

		<view class="w-660 h-1200 margin-auto margin-bottom-120 margin-top-30 padding-35"
			:style="{background:'url('+Imgbase+'/new_goodmall_poor7.png)','background-size':'100% 100%',}">
			<view class="swiper w100 h-520 radius-36 overhid">
				<u-swiper :list="desc.adimages_text" height="520rpx" @click="photo" :indicator="true"
					bgColor="rgba(0,0,0,0)"></u-swiper>
			</view>
			<view class="titie one-line padding-top-20 padding-left-12 padding-right-12">
				{{desc.name}}
			</view>
			<view class="flex-between padding-left-12  padding-top-25">
				<view class="price">
					<view class="">
						<text v-if="desc.price !== '0.00'" style="color: red;">￥</text>
						<text v-if="desc.price !== '0.00'" class="red">{{desc.price}}</text>
						<text v-if="desc.price !== '0.00'"></text>
						<text v-if="desc.price !== '0.00' && desc.score > 0" style="padding-right: 5rpx;">+</text>
						<text v-if="desc.score > 0" class="red">{{desc.score}}</text>
						<text v-if="desc.score > 0" style="color: red;">积分</text>
					</view>
				</view>
				<view class="padding-top-15" @click="islike()">
					<image :src=" Imgbase+'/new_goodmall_img2.png'" v-if="desc.is_collect == 0" mode="aspectFit"
						class="w-60 h-48">
					</image>
					<image :src=" Imgbase+'/new_goodmall_img3.png'" v-else mode="aspectFit" class="w-60 h-48">
					</image>
				</view>
			</view>

			<view class="padding-top-125 font-22" style="text-align: right;color: #7D7470;">
				剩余库存: {{desc.stock}}件
			</view>

			<view class="item_d font-24 padding-bottom-20">
				<view class="flex alc padding-left-25 padding-top-25">
					<view class="w-130" style="color: #726661;">
						送至
					</view>
					<view class="flex alc" style="color: #000;" @click="address">
						<view class="w-380">
							{{detail}}
						</view>
						<u-icon name="arrow-right" size="18"></u-icon>
					</view>
				</view>
				<view class="w100 h-6 margin-top-25" style="background-color: #AE8F84;">

				</view>
				<view class="flex alc padding-left-25 padding-top-25">
					<view class="w-130" style="color: #726661;">
						注意事项
					</view>
					<view class="flex alc" style="color: #000;">
						预售商品不支持七天无理由退换
					</view>
				</view>
			</view>
			<view class="pay text-center" @click="payshows">
				<image class="w-210 h-65" :src="Imgbase + '/new_goodmall_poor3.png'" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 选择地址 -->
		<view class="">
			<u-popup :show="show" @close="close" @open="open" :safeAreaInsetBottom="false" :round="80">
				<view class="add">
					<view class="title">
						收货地址
						<view class="close" @click="closeshow">
							<u-icon name="close" size="24"></u-icon>
						</view>
					</view>
					<view class="text_right" @click="gomodify">
						<text style="margin-top: 10rpx;">编辑地址</text>
						<view class="" style="float: right;">
							<u-icon name="edit-pen" color="#0375EE" size="28"></u-icon>
						</view>
					</view>
					<view class="ress">
						<scroll-view scroll-y="true" show-scrollbar="true" style="height: 850rpx;">
							<radio-group style="width: 100%;">
								<view class="ress_item" v-for="(item, index) in addresslist" :key="index">
									<view class="icon">
										{{item.name[0]}}
									</view>
									<view class="infors">
										<view class="top">
											<view class="name one_worp">{{item.name}}</view>
											<text class="phone">{{item.phone}}</text>
											<text v-if="item.selected == 1" class="moren">默认</text>
										</view>
										<view class="bot two_worp">
											{{item.detail}}
											<view class="" @click="radioCheck(index)">
												<radio :value="item.id" :checked="item.id==radioValue">
												</radio>
											</view>
										</view>
									</view>

								</view>
							</radio-group>
						</scroll-view>
					</view>
					<view class="btn">
						<u-button text="确定" customStyle="height:90rpx;" @click="addressbtn" color="#ECAF64">
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 立即支付 -->
		<view class="">
			<u-popup :show="payshow" @close="closes" @open="opens" :safeAreaInsetBottom="false" :round="62">
				<view class="pays radius-62">
					<view class="top padding-bottom-25">
						<view class="img padding-right-20">
							<image class="radius-15" :src="desc.adimage" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="text two_worp">
								{{desc.name}}
							</view>
							<view class="price padding-top-40">
								<text v-if="desc.price !== '0.00'">￥{{desc.price}}</text>
								<text v-if="desc.price !== '0.00' && desc.score > 0">+</text>
								<text v-if="desc.score > 0">{{scores}}积分</text>
							</view>
						</view>
					</view>

					<!-- <view class="notes padding-15 radius-12 margin-top-5 margin-bottom-15 flex-between"
						@click="noteshow = true">
						<view class="text1">
							订单备注
						</view>
						<view class="flex-between">
							<view class="one-line w-300" style="text-align: right;">
								{{notetext==''?'无备注':notetext}}
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view> -->

					<view class="notes padding-15 radius-12 margin-top-5 margin-bottom-15 flex-between"
						@click="chooseshow = true">
						<view class="text1">
							优惠券
						</view>
						<view class="flex-between">
							<view class="one-line w-300" style="text-align: right;">
								{{coupontext}}
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

					<view class="w-630 margin-auto padding-20" style="color: #8B5F52;"
						:style="{background:'url('+Imgbase+'/new_goodmall_poor5.png)','background-size':'100% 100%',}">
						<view class="flex-between padding-10" style="border-bottom: 4rpx solid  #9f6c5e;">
							<view class="">
								<text v-if="desc.score > 0">账户积分</text>
								<text v-else>账户余额</text>
							</view>
							<view class="">
								<text v-if="desc.score > 0">{{descm.score}}</text>
								<text v-else>￥{{descm.money}}</text>

							</view>
						</view>

						<view class="flex-between padding-10" style="border-bottom: 4rpx solid  #9f6c5e;">
							<view class="">
								勇者币
							</view>
							<view class="">
								{{Math.floor(coupon * 1000) / 100}}(可抵值{{ Math.floor(coupon * 100) / 100}})
							</view>
							<!-- <view class="black one_worp">
								<u-switch v-model="values" size="14" active-color="#19BE6B"
									@change="changes"></u-switch>
							</view> -->
						</view>

						<view class="flex-between padding-10" style="border-bottom: 4rpx solid  #9f6c5e;">
							<view class="">
								红豆
							</view>
							<view class="">
								{{loss}}(可抵值{{loss/10}})
							</view>
							<!-- <view class="black one_worp">
								<u-switch v-model="valueshong" size="14" active-color="#19BE6B"
									@change="changeshong"></u-switch>
							</view> -->
						</view>

						<view class="flex-between padding-10">
							<view class="">
								积分
							</view>
							<view class="df alc">
								{{score}} (可抵值{{score/10}})
							</view>
						</view>
					</view>
					<view class="text-center padding-top-25">
						<image class="w-425 h-72" :src="Imgbase + '/new_goodmall_poor4.png'" mode="aspectFit"
							@click="$u.throttle(pay, 1000)"></image>
					</view>
				</view>
			</u-popup>
		</view>


		<!-- 订单备注 -->
		<u-popup :show="noteshow" @close="noteclose" closeable>
			<view class="padding-20 radius-62">
				<view class="text-center font-30">
					订单备注
				</view>
				<view class="margin-top-20 padding-15 notes radius-22 h-200 w100">
					<textarea class="w100 h100" placeholder="请填写订单备注" maxlength="-1" :value="notetext" adjust-position
						@blur="bindTextAreaBlur" />
				</view>
				<view class="padding-top-30 w-300 margin-auto padding-bottom-50">
					<u-button type="warning" text="确定" @click="noteclose"></u-button>
				</view>
			</view>
		</u-popup>

		<view class="cu-modal" :class="modalName=='getPhoneNumber'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">认证手机号</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white">
					您还未认证手机号，为了程序功能的正常使用请您进行微信手机认证，否则将无法通过APP手机登录到该账号。
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" open-type="getPhoneNumber"
							@getphonenumber="onGetPhoneNumber">确定</button>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="chooseshow" @close="couponclose" mode="center" round="15" closeable>
			<view class="padding-50 radius-15 w-650 h-900">

				<view class="text-center font-30 padding-top-80" v-if="couponlist.length == 0">
					暂无可用优惠券
				</view>

				<view class="" v-else>
					<scroll-view scroll-y class="w100 h-800" scroll-with-animation style="overflow: hidden;"
						@scrolltolower="onbottomcoupon()">
						<view
							class="h-200 padding-top-50 w-570 margin-auto margin-top-25 padding-left-30 padding-right-30"
							v-for="(item,index) in couponlist" :key="index" @click="choosecoupon(index)"
							v-if="item.from_id == 0"
							:style="{background:'url('+Imgbase+'/app_sign_c_middle2.png)','background-size':'100% 100%',}">
							<view class="text-sm" style="padding-left: 20upx;padding-right: 20upx;color: #5c4228;">
								<view class="action text-df text-red">
									{{item.title}}
								</view>
							</view>
							<view style="clear: both;"></view>
							<view class="text-sm font-22 padding-left-20 padding-top-15" style="color: #5c4228;">
								<view class="content  text-ablack ">
									获得时间: {{item.get_at}}
								</view>
								<view class="action  text-ablack padding-top-8">
									到期时间: {{item.end_at}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import md5 from '@/utils/md5.js'
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				id: 0,
				desc: '',
				value: 1,
				show: false,
				radioValue: '',
				addresslist: [],
				detail: '暂无地址',
				address_id: '',
				payshow: false,
				coupon: '',
				values: false,
				valueshong: false,
				prices: '',
				couponk: 0,
				losshong: 0,
				scores: '',
				content: '',
				paytype: 0,
				code: 0,
				loss: 0,
				descm: [],
				modalName: null,
				noteshow: false,
				notetext: '',
				score: 0,
				coupontext: '',
				couponpage: 1,
				couponlist: [],
				chooseshow: false,
				couponid: -1
			}
		},
		onLoad(e) {
			this.id = e.id
			this.code = e.code
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$uniApi.trylogin();
			}
			this.gooddesc()
			this.addressList()
			this.userFront()
			this.userCoupon()
		},
		methods: {
			// 关闭选择优惠券弹窗
			couponclose() {
				this.chooseshow = false
			},
			// 选择优惠券
			choosecoupon(i) {
				this.chooseshow = false
				var item = this.couponlist[i]
				this.coupontext = item.title
				this.couponid = item.id

				console.log(this.couponid)
			},
			// 优惠券分页
			onbottomcoupon() {
				this.couponpage++
				this.userCoupon1()
			},
			// 查看可用优惠券
			async userCoupon() {
				let _this = this;
				let item = await this.$api.post('user/userCoupon', {
					token: uni.getStorageSync('token'),
					type: 1,
					page: this.couponpage,
					// limit: 2
				})
				_this.couponlist = _this.couponlist.concat(item.data.list)
				if (_this.couponlist.length == 0) {
					_this.coupontext = '暂无可用优惠券'
				} else {
					_this.coupontext = '请选择优惠券'
				}
			},
			bindTextAreaBlur: function(e) {
				this.notetext = e.detail.value
			},
			noteclose() {
				this.noteshow = false
			},
			gobape() {
				uni.switchTab({
					url: '/pages/goodspoor/backpack'
				})
			},
			// 收藏
			async islike(e, index) {
				let _this = this
				let item = await this.$api.post('shop/goodCollect', {
					token: uni.getStorageSync('token'),
					id: this.id,
					special: 1
				})
				this.gooddesc()
				uni.showToast({
					icon: 'none',
					title: item.data.tip
				});
			},
			hideModal(e) {
				this.modalName = null
			},
			onGetPhoneNumber(e) {
				let _this = this;
				wx.login({
					success(res) {
						uni.request({
							url: _this.$globals.apibase + '/api/Minlogin/getPhoneNumber',
							data: {
								token: uni.getStorageSync('token'),
								code: res.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								ver: _this.$mpVer
							},
							method: 'POST',
							header: {
								'content-type': 'application/json'
							},
							success: (res) => {
								if (res.data.code == '1') {
									_this.userFront()
									uni.showToast({
										icon: 'none',
										title: '授权成功!',
										duration: 1500,
									});

									setTimeout(() => {
										_this.payshow = true
									}, 1500)

								} else {
									uni.showToast({
										icon: 'none',
										title: '授权失败!',
										duration: 3000,
									});
								}
								_this.modalName = null
							}
						});
					}
				})
			},
			payshows() {
				let _this = this;

				// 判断有无绑定手机号
				if (this.descm.mobile == '') {
					this.$refs.uToast.show({
						message: "请先绑定手机号",
						duration: 1500,
					})
					setTimeout(() => {
						_this.modalName = 'getPhoneNumber';
					}, 1500)
					return
				}

				// 判断有无收货地址
				if (this.detail == '暂无地址') {
					this.$refs.uToast.show({
						message: "请添加收货地址"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/address'
						})
					}, 2000)
					return
				}
				this.payshow = true
			},
			changes(e) {
				if (e) {
					this.couponk = 1
					if (parseFloat(this.coupon) >= parseFloat(this.prices)) {
						this.prices = 0
					} else {
						this.prices = parseFloat(this.prices - parseFloat(this.coupon))
					}
				} else {
					// this.prices = parseFloat(this.prices + parseFloat(this.coupon))
					if (this.losshong == 1) {
						if (this.desc.price - this.loss / 10 < 0) {
							this.prices = this.desc.price
							console.log(456456)
						} else {
							this.prices = this.desc.price - this.loss / 10
							console.log(123123)
						}
					} else {
						this.prices = this.desc.price
						console.log(789789)
					}
					this.couponk = 0
				}
			},
			changeshong(e) {
				if (e) {
					this.losshong = 1
					if (parseFloat(this.loss / 10) >= parseFloat(this.prices)) {
						this.prices = 0
					} else {
						this.prices = parseFloat(this.prices - parseFloat(this.loss / 10))
					}
				} else {
					// this.prices = parseFloat(this.prices + parseFloat(this.loss/10))

					// this.prices = parseFloat(this.desc.price - parseFloat(this.coupon))

					if (this.couponk == 1) {
						if (this.desc.price - this.coupon < 0) {
							this.prices = this.desc.price
						} else {
							this.prices = this.desc.price - this.coupon
						}
					} else {
						this.prices = this.desc.price
					}
					this.losshong = 0
				}
			},
			userFront() {
				let _this = this
				uni.request({
					url: _this.$globals.apibase + '/api/Userways/userFront',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.descm = res.data.data.user_desc
						_this.coupon = res.data.data.user_desc.coupon / 10;
						_this.loss = res.data.data.user_desc.loss;
						_this.score = res.data.data.user_desc.score;
					}
				});
			},
			// 选择地址
			addressbtn() {
				this.show = false
			},
			gomodify() {
				uni.navigateTo({
					url: '/pages/index/address'
				})
			},
			closeshow() {
				this.show = false
			},
			back() {
				uni.navigateBack()
			},
			// 获取地址列表
			addressList() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckorder/addressList',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.detail = res.data.data.list[0].detail;
						_this.address_id = res.data.data.list[0].id;
						_this.addresslist = res.data.data.list;
						_this.radioValue = res.data.data.list[0].id;
						// for (let i = 0; i < res.data.data.list.length; i++) {
						// 	_this.addresslist = _this.addresslist.concat(res.data.data.list[i])
						// }
						// if (_this.address == null) {
						// 	_this.address = res.data.data.list2[0]
						// 	_this.address_id = res.data.data.list2[0].id
						// }
					}
				});
			},
			radioCheck(index) {
				this.address_id = this.addresslist[index].id
				this.detail = this.addresslist[index].detail;
				this.addresslist.forEach((item => {
					item.isCheck = false
				}))
				if (this.radioValue == this.addresslist[index].id) {
					this.radioValue = null
				} else {
					this.radioValue = this.addresslist[index].id
				}
			},
			opens() {
				// console.log('open');
			},
			closes() {
				this.payshow = false
				// console.log('close');
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			address() {
				this.show = true
			},
			valChange(e) {
				this.prices = e.value * this.desc.price
				this.scores = e.value * this.desc.score
				// console.log('当前值为: ' + e.value)
			},
			// 立即支付
			pay() {
				let _this = this;
				let str = _this.$uniApi.mdnum();
				var md5Str = md5.hex_md5(str[1])
				uni.request({
					url: this.$globals.apibase + '/api/shop/specialBuy',
					data: {
						token: uni.getStorageSync('token'),
						use_coupon: _this.couponk, // 是否使用欧券 1：是    0：否
						use_loss: _this.losshong, // 是否使用红豆1：是    0：否
						id: _this.id,
						number: _this.value, // 购买数量
						address_id: _this.address_id, //地址id
						type: 0, // 支付方式0微信1支付宝
						nonce: str[2],
						sign: md5Str,
						timestamp: str[0],
						mark: _this.notetext,
						ccoupon_id: _this.couponid == -1 ? '' : _this.couponid // 优惠券id
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.paytype = 1
						_this.payshow = false
						if (res.data.code == 0) {
							_this.$refs.uToast.show({
								message: res.data.msg
							})
						}
						if (res.data.data.state == 0) {
							_this.paytype = 0
							uni.requestPayment({
								timeStamp: res.data.data.result.timeStamp,
								nonceStr: res.data.data.result.nonceStr,
								package: res.data.data.result.package,
								signType: res.data.data.result.signType,
								paySign: res.data.data.result.paySign,
								success: function(result) {
									console.log(123123132123)
									let str = _this.$uniApi.mdnum();
									var md5Str = md5.hex_md5(str[1])
									uni.request({
										url: _this.$globals.apibase +
											'/api/shop/specialBuy',
										data: {
											token: uni.getStorageSync('token'),
											use_coupon: _this
												.couponk, // 是否使用欧券 1：是    0：否
											use_loss: _this
												.losshong, // 是否使用红豆1：是    0：否
											id: _this.id,
											number: _this.value, // 购买数量
											address_id: _this.address_id, //地址id
											type: 0, // 支付方式0微信1支付宝
											nonce: str[2],
											sign: md5Str,
											timestamp: str[0],
											mark: _this.notetext,
											ccoupon_id: _this.couponid == -1 ? '' : _this
												.couponid // 优惠券id
										},
										method: 'POST',
										header: {
											'content-type': 'application/json'
										},
										success: (res) => {
											_this.paytype = 1
											_this.payshow = false
											if (res.data.code == 0) {
												_this.$refs.uToast.show({
													message: res.data.msg
												})
											}
											if (res.data.data.state == 0) {
												_this.paytype = 0

											} else {
												_this.paytype = 0
												_this.gooddesc()
												_this.$refs.uToast.show({
													message: "支付成功，请在赏袋已下单中查看"
												})
												_this.couponid = -1
												_this.couponlist = []
												_this.userCoupon()
											}
										}
									});
								},
								fail: (res) => {},
								cancel: (res) => {},
							})
						} else {
							_this.paytype = 0
							_this.gooddesc()
							_this.$refs.uToast.show({
								message: "支付成功，请在赏袋已下单中查看"
							})
							_this.couponid = -1
							_this.couponlist = []
							_this.userCoupon()
						}
					}
				});
			},
			payout(trade) {
				let _this = this;

			},
			photo(index) {
				// console.log(this.desc.adimages_text[index])
				// 预览图片
				let _this = this
				uni.previewImage({
					current: index,
					urls: this.desc.adimages_text,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							console.log(data)
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
							// 	.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 获取商品详情
			gooddesc() {
				let _this = this
				uni.request({
					url: this.$globals.apibase + '/api/shop/specialDetail',
					data: {
						token: uni.getStorageSync('token'),
						id: _this.id

					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						this.desc = res.data.data.desc
						this.prices = res.data.data.desc.price
						this.scores = res.data.data.desc.score
						this.content = res.data.data.desc.content

					}
				});
			},
		},
		onReachBottom() {
			uni.$emit('onReachBottom');
		},
		//分享功能
		onShareAppMessage(res) {
			let _this = this;
			return {
				title: _this.desc.name,
				path: '/pages/index/detail?id=' + _this.id + '&code=1',
				imageUrl: 'https://yzcos.oqzhs.cn/brave/yonglogo.png',
			}
		},

	}
</script>

<style lang="scss">
	.btnshare::after {
		border: none;
	}

	.notes {
		background-color: rgba(138, 94, 81, .2);

		.text1 {
			color: #5d5d5d;
		}
	}

	.item_d {
		width: 600rpx;
		background-color: rgba(138, 94, 81, .2);
		border-radius: 15rpx;
		margin: 30rpx auto;
	}

	.red {
		color: red;
	}

	.item_detail {
		padding: 20rpx;
		margin-top: 20rpx;
		font-weight: bold;
		margin-bottom: 160rpx;

		.title {
			margin-bottom: 20rpx;
		}
	}

	.pays {
		// height: 700rpx;
		padding: 50rpx 30rpx;
		background-color: #FCF4F1;

		.top {
			display: flex;
			font-weight: bold;
			font-size: 36rpx;

			.img {
				width: 220rpx;
				height: 220rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.price {
				color: #E60000;
				margin-bottom: 20rpx;
				font-size: 30rpx;
			}

			.text {
				width: 480rpx;
				color: #333;
				padding-left: 10rpx;
				font-size: 30rpx;
			}
		}

		.btn {
			padding-top: 30rpx;
			width: 80%;
			margin: 0 auto;

			image {
				width: 100%;
			}
		}

		.bot {
			padding-top: 20rpx;

			.item {
				width: 100%;
				padding: 15rpx 25rpx;
				background-color: #F4F4F4;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #817f7f;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.price {
					color: #F66055;
				}

				.black {
					max-width: 500rpx;
					color: #363535;
				}
			}
		}
	}

	.swiper {
		border: solid 6rpx #8a5e51;
	}

	.add {
		height: 1200rpx;
		background-color: #FCF4F1;
		border-radius: 55rpx;
		padding-top: 50rpx;

		.title {
			position: relative;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;

			.close {
				position: absolute;
				right: 50rpx;
				top: 0;
			}
		}

		.text_right {
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: right;
			padding-right: 60rpx;
			margin-top: 30rpx;
			color: #0375EE;
		}

		.ress {
			width: 94%;
			margin: 10rpx auto 0;
			background-color: #F2E6E3;
			border-radius: 15rpx;

			.ress_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 30rpx;
				width: 100%;
				// border-top: 1rpx solid #eee;

				.icon {
					width: 80rpx;
					height: 80rpx;
					background-color: #ffdfcf;
					border-radius: 40rpx;
					text-align: center;
					line-height: 80rpx;
					color: #d5564d;
				}

				.infors {
					width: 83%;

					.top {
						display: flex;
						align-items: center;
					}

					.name {
						max-width: 230rpx;
						font-size: 34rpx;
						font-weight: bold;
						margin-right: 15rpx;
					}

					.phone {
						color: #bcbcbc;
					}

					.bot {
						width: 100%;
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;
					}

					.moren {
						margin-left: 10rpx;
						font-size: 20rpx;
						padding: 5rpx;
						text-align: center;
						border-radius: 10rpx;
						color: #F66055;
						border: 1px solid #F66055;
					}
				}
			}
		}

		.btn {
			width: 90%;
			margin: 20rpx auto 0;
			border-radius: 50rpx;
			overflow: hidden;
		}
	}
</style>